import { Col, Row, Select } from 'antd';
import { MONTHList } from '@/pages/SalaryManage/utils/staticList';
import React, { memo } from 'react';
import RangeMonthSelect from './rangeMonthSelect';

const { Option } = Select;
const Special = ({ value = [], onChange, len = 0, disabled = false }) => (
    <div>
        <Row>
            <Col span={7} />
            <Col span={17}>
                <Row gutter={8}>
                    <Col span={12}>
                        <div style={{ paddingBottom: '6px' }}>取值区间</div>
                    </Col>
                    <Col span={5}>纳入年份</Col>
                    <Col span={6}>纳入月份</Col>
                </Row>
            </Col>
            {console.log(value, len)}
        </Row>
        {new Array(len).fill(1).map((item, i) => (
            // eslint-disable-next-line react/no-array-index-key
            <Row key={i + item} style={{ marginBottom: '8px' }}>
                <Col span={7} style={{ textAlign: 'right' }}>
                    第{i + 1}次：
                </Col>
                <Col span={17}>
                    <Row gutter={8}>
                        <Col span={12}>
                            <RangeMonthSelect
                                value={value[i]}
                                disabled={disabled}
                                onChange={val => {
                                    const newValueArr = value.slice();
                                    newValueArr[i] = {
                                        ...(newValueArr[i] || {}),
                                        ...val
                                    };
                                    onChange(newValueArr);
                                }}
                            />
                        </Col>
                        <Col span={5}>
                            <Select
                                placeholder="请选择"
                                disabled={disabled}
                                value={value[i] && value[i].salaryYearType}
                                onChange={key => {
                                    const newValueArr = value.slice();
                                    newValueArr[i] = {
                                        ...(newValueArr[i] || {}),
                                        salaryYearType: key
                                    };
                                    onChange(newValueArr);
                                }}
                            >
                                <Option value={1}>当年</Option>
                                <Option value={2}>次年</Option>
                            </Select>
                        </Col>
                        <Col span={6}>
                            <Select
                                placeholder="请选择"
                                value={value[i] && value[i].salaryMonth}
                                disabled={disabled}
                                onChange={key => {
                                    const newValueArr = value.slice();
                                    newValueArr[i] = {
                                        ...(newValueArr[i] || {}),
                                        salaryMonth: key
                                    };
                                    onChange(newValueArr);
                                }}
                            >
                                {MONTHList.map(month => (
                                    <Option value={month.month} key={month.monthName}>
                                        {month.monthName}
                                    </Option>
                                ))}
                            </Select>
                        </Col>
                    </Row>
                </Col>
            </Row>
        ))}
    </div>
);
export default memo(Special);
